<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lonch</title>
</head>
<style>
    .title img{
        width: 100%;
    }
    .content img{
        width: 100%;
    }
</style>
<body>
    <div id="head"></div>
        <div class="container">
        <div class="title">
            <img src="../images/title.jpg" alt="">
        </div>
        <div class="content">
            <img src="../images/content.jpg" alt="">
            <img src="../images/content.jpg" alt="">
            <img src="../images/content.jpg" alt="">
            <img src="../images/content.jpg" alt="">
            <img src="../images/content.jpg" alt="">
            <img src="../images/content.jpg" alt="">
            <img src="../images/content.jpg" alt="">
            <img src="../images/content.jpg" alt="">
            <img src="../images/content.jpg" alt="">
        </div>
        </div>
</body>
    <script src="../js/jquery.min.js"></script>
<script>
    $(function(){
        $("#head").load("head-nav.html");
        /*$("#nav-click>li").click(function(){
         $(this).siblings().removeClass("active");
         $(this).addClass("active");
         })*/
//        $("#head #nav-click>li:eq(2)").siblings().removeClass("active");
//        $("#head #nav-click>li:eq(2)").addClass("active");
        $(window).resize(function(){
            if(window.innerWidth<768){
                $(".container").removeClass('container').addClass('container-fiuld')
                $(".content img").attr('src','../images/content1.jpg');
                $(".title img").attr('src','../images/title1.jpg');
            }
            if(window.innerWidth>768){
                $(".content img").attr('src','../images/content.jpg');
                $(".title img").attr('src','../images/title.jpg');
            }
        });
    })
</script>
</html>